<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">
    
    <p:growl life="10000" id="globalGrowl" autoUpdate="true" severity="info"/>

	<h:form id="headerForm">
		<br />
		<div style="margin-left: 190px; width: 888px; position: inherit;">
			<p:commandButton value="Home"/>			
			<p:commandButton value="Help" />
			<p:menuButton value="Settings" style="margin-left: 485px;" rendered="#{loginBean.loggedIn}">  
			        <p:menuitem value="Inbox"   icon="ui-icon-disk"/>  
			        <p:menuitem value="Outbox"  icon="ui-icon-arrowrefresh-1-w"/>  
			        <p:menuitem value="Delete" icon="ui-icon-close"  ajax="false"/>  
			        <p:separator />  
			        <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="ui-icon-extlink"/>  
			    </p:menuButton>  
			    <p:menuButton value="Messages" rendered="#{loginBean.loggedIn}">  
			        <p:menuitem value="Save"   icon="ui-icon-disk"/>  
			        <p:menuitem value="Update" icon="ui-icon-arrowrefresh-1-w"/>  
			        <p:menuitem value="Delete" icon="ui-icon-close"  ajax="false"/>  
			        <p:separator />  
			        <p:menuitem value="Homepage" url="http://www.primefaces.org" icon="ui-icon-extlink"/>  
			    </p:menuButton>
			    <p:commandButton value="Logout" action="#{loginBean.logout}" style=" background-color:red;" rendered="#{loginBean.loggedIn}"/>  
		</div>
		
	</h:form>
	<h:form id="userMenu"  style="margin-top:22px">
	       
			      		    
	<div style="width: 888px;height:75px; position: absolute; margin-top: 68px; margin-left: 170px; font-size: 19px">
		<p:megaMenu style="">  
		
		<p:submenu label="Categories:" />	
        <p:submenu label="Books" icon="ui-icon-check">  
        	
            <p:column>  
                <p:submenu label="TV.1">  
                    <p:menuitem value="TV.1.1" url="#" />  
                    <p:menuitem value="TV.1.2" url="#" />  
                </p:submenu>  
                <p:submenu label="TV.2">  
                    <p:menuitem value="TV.2.1" url="#" />  
                    <p:menuitem value="TV.2.2" url="#" />  
                    <p:menuitem value="TV.2.3" url="#" />  
                </p:submenu>  
                <p:submenu label="TV.3">  
                    <p:menuitem value="TV.3.1" url="#" />  
                    <p:menuitem value="TV.3.2" url="#" />  
                </p:submenu>  
            </p:column>  
  
            <p:column>  
                <p:submenu label="TV.4">  
                    <p:menuitem value="TV.4.1" url="#" />  
                    <p:menuitem value="TV.4.2" url="#" />  
                </p:submenu>  
                <p:submenu label="TV.5">  
                    <p:menuitem value="TV.5.1" url="#" />  
                    <p:menuitem value="TV.5.2" url="#" />  
                    <p:menuitem value="TV.5.3" url="#" />  
                </p:submenu>  
            </p:column>  
  
            <p:column>  
                <strong>Sopranos</strong>  
                <p:graphicImage value="/images/sopranos/sopranos1.jpg" width="200"/>  
            </p:column>  
        </p:submenu>  
  
        <p:submenu label="Electronics" icon="ui-icon-document">  
  
            <p:column>  
                <p:submenu label="Sports.1">  
                    <p:menuitem value="Sports.1.1" url="#" />  
                    <p:menuitem value="Sports.1.2" url="#" />  
                </p:submenu>  
                <p:submenu label="Sports.2">  
                    <p:menuitem value="Sports.2.1" url="#" />  
                    <p:menuitem value="Sports.2.2" url="#" />  
                    <p:menuitem value="Sports.2.3" url="#" />  
                </p:submenu>  
                <p:submenu label="Sports.3">  
                    <p:menuitem value="Sports.3.1" url="#" />  
                    <p:menuitem value="Sports.3.2" url="#" />  
                </p:submenu>  
            </p:column>  
  
            <p:column>  
                <p:submenu label="Sports.4">  
                    <p:menuitem value="Sports.4.1" url="#" />  
                    <p:menuitem value="Sports.4.2" url="#" />  
                </p:submenu>  
                <p:submenu label="Sports.5">  
                    <p:menuitem value="Sports.5.1" url="#" />  
                    <p:menuitem value="Sports.5.2" url="#" />  
                    <p:menuitem value="Sports.5.3" url="#" />  
                </p:submenu>  
            </p:column>  
            <p:column>  
                <p:submenu label="Sports.7">  
                    <p:menuitem value="Sports.7.1" url="#" />  
                    <p:menuitem value="Sports.7.2" url="#" />  
                </p:submenu>  
                <p:submenu label="Sports.8">  
                    <p:menuitem value="Sports.8.1" url="#" />  
                    <p:menuitem value="Sports.8.2" url="#" />  
                    <p:menuitem value="Sports.8.3" url="#" />  
                    <p:menuitem value="Sports.8.4" url="#" />  
                    <p:menuitem value="Sports.8.5" url="#" />  
                    <p:menuitem value="Sports.8.6" url="#" />  
                </p:submenu>  
            </p:column>  
        </p:submenu>  
  
        <p:submenu label="Entertainment" icon="ui-icon-pencil">  
            <p:column>  
                <p:submenu label="Entertainment.1">  
                    <p:menuitem value="Entertainment.1.1" url="#" />  
                    <p:menuitem value="Entertainment.1.2" url="#" />  
                </p:submenu>  
                <p:submenu label="Entertainment.2">  
                    <p:menuitem value="Entertainment.2.1" url="#" />  
                    <p:menuitem value="Entertainment.2.2" url="#" />  
                    <p:menuitem value="Entertainment.2.3" url="#" />  
                </p:submenu>  
                <p:submenu label="Entertainment.3">  
                    <p:menuitem value="Entertainment.3.1" url="#" />  
                    <p:menuitem value="Entertainment.3.2" url="#" />  
                </p:submenu>  
            </p:column>  
  
            <p:column>  
                <p:submenu label="Entertainment.4" icon="ui-icon-help">  
                    <p:menuitem value="Entertainment.4.1" url="#" />  
                    <p:menuitem value="Entertainment.4.2" url="#" />  
                </p:submenu>  
                <p:submenu label="Entertainment.5">  
                    <p:menuitem value="Entertainment.5.1" url="#" />  
                    <p:menuitem value="Entertainment.5.2" url="#" />  
                    <p:menuitem value="Entertainment.5.3" url="#" />  
                </p:submenu>  
                <p:submenu label="Entertainment.6">  
                    <p:menuitem value="Entertainment.6.1" url="#" />  
                    <p:menuitem value="Entertainment.6.2" url="#" />  
                </p:submenu>  
            </p:column>  
        </p:submenu>  
  
  
        <p:submenu label="Household" icon="ui-icon-contact">  
            <p:column>  
                <p:submenu label="Tech.1">  
                    <p:menuitem value="Tech.1.1" url="#" />  
                    <p:menuitem value="Tech.1.2" url="#" />  
                </p:submenu>  
                <p:submenu label="Tech.2">  
                    <p:menuitem value="Tech.2.1" url="#" />  
                    <p:menuitem value="Tech.2.2" url="#" />  
                    <p:menuitem value="Tech.2.3" url="#" />  
                </p:submenu>  
                <p:submenu label="Tech.3">  
                    <p:menuitem value="Tech.3.1" url="#" />  
                    <p:menuitem value="Tech.3.2" url="#" />  
                </p:submenu>  
            </p:column>  
  
            <p:column>  
                <p:submenu label="Tech.4">  
                    <p:menuitem value="Tech.4.1" url="#" />  
                    <p:menuitem value="Tech.4.2" url="#" />  
                </p:submenu>  
            </p:column>  
        </p:submenu>
        <p:submenu label="Motors" icon="ui-icon-contact">  
            <p:column>  
                <p:submenu label="Tech.1">  
                    <p:menuitem value="Tech.1.1" url="#" />  
                    <p:menuitem value="Tech.1.2" url="#" />  
                </p:submenu>  
                <p:submenu label="Tech.2">  
                    <p:menuitem value="Tech.2.1" url="#" />  
                    <p:menuitem value="Tech.2.2" url="#" />  
                    <p:menuitem value="Tech.2.3" url="#" />  
                </p:submenu>  
                <p:submenu label="Tech.3">  
                    <p:menuitem value="Tech.3.1" url="#" />  
                    <p:menuitem value="Tech.3.2" url="#" />  
                </p:submenu>  
            </p:column>  
  
            <p:column>  
                <p:submenu label="Tech.4">  
                    <p:menuitem value="Tech.4.1" url="#" />  
                    <p:menuitem value="Tech.4.2" url="#" />  
                </p:submenu>  
            </p:column>  
        </p:submenu>
        <p:submenu label="Computer &amp; Software" icon="ui-icon-contact">  
            <p:column>  
                <p:submenu label="Tech.1">  
                    <p:menuitem value="Tech.1.1" url="#" />  
                    <p:menuitem value="Tech.1.2" url="#" />  
                </p:submenu>  
                <p:submenu label="Tech.2">  
                    <p:menuitem value="Tech.2.1" url="#" />  
                    <p:menuitem value="Tech.2.2" url="#" />  
                    <p:menuitem value="Tech.2.3" url="#" />  
                </p:submenu>  
                <p:submenu label="Tech.3">  
                    <p:menuitem value="Tech.3.1" url="#" />  
                    <p:menuitem value="Tech.3.2" url="#" />  
                </p:submenu>  
            </p:column>  
  
            <p:column>  
                <p:submenu label="Tech.4">  
                    <p:menuitem value="Tech.4.1" url="#" />  
                    <p:menuitem value="Tech.4.2" url="#" />  
                </p:submenu>  
            </p:column>  
        </p:submenu>
        <p:submenu label="Others" icon="ui-icon-contact">  
            <p:column>  
                <p:submenu label="Tech.1">  
                    <p:menuitem value="Tech.1.1" url="#" />  
                    <p:menuitem value="Tech.1.2" url="#" />  
                </p:submenu>  
                <p:submenu label="Tech.2" >  
                    <p:menuitem value="Tech.2.1" url="#"/>  
                    <p:menuitem value="Tech.2.2" url="#" />  
                    <p:menuitem value="Tech.2.3" url="#" />  
                </p:submenu>  
                <p:submenu label="Tech.3">  
                    <p:menuitem value="Tech.3.1" url="#" />  
                    <p:menuitem value="Tech.3.2" url="#" />  
                </p:submenu>  
            </p:column>  
  
            <p:column>  
                <p:submenu label="Tech.4">  
                    <p:menuitem value="Tech.4.1" url="#" />  
                    <p:menuitem value="Tech.4.2" url="#" />  
                </p:submenu>  
            </p:column>  
        </p:submenu>                          
    </p:megaMenu>  
			
	</div>
		
	</h:form>
</ui:composition>
